<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-07-22 12:41:52
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-09-02 13:00:37
 * @FilePath: \web-components-box\components\Drawer\DrawerEditor.vue
 * @Description: 伸缩性抽屉式菜单，文本编辑组件
-->

<script setup lang="tsx">
const props = defineProps({
  toolbarMaxHeight: {
    // 伸缩性抽屉编辑菜单的 最大高度，单位px
    type: Number,
    default: 600,
  },
});
// 去除伸缩框后剩余高度
const contentHeight = ref("calc(100% - 120px)");
// 获取伸缩框的高度
const getResizeBoxHeight = (size: { width: number; height: number }) => {
  if (size.height <= props.toolbarMaxHeight) {
    contentHeight.value = `calc(100% - ${size.height}px)`;
  }
};

// function showContextMenu(contextMenu, x, y) {
//   contextMenu.style.left = `${x}px`;
//   contextMenu.style.top = `${y}px`;
//   contextMenu.style.display = "block";
// }
// onMounted(() => {
//   const contextMenu = document.getElementById("contextMenu");

//   // 伸缩式工具栏
//   const toolbar = document.getElementsByClassName(
//     "editor-layout-toolbar"
//   ) as HTMLCollection;
//   // 为元素添加contextmenu事件监听器
//   toolbar[0].addEventListener("contextmenu", (e) => {
//     // 阻止默认行为（即显示浏览器默认的上下文菜单）
//     e.preventDefault();
//     // 执行自定义操作，例如，在控制台输出一条消息
//     console.log("右键点击了div!");
//     showContextMenu(contextMenu, e.clientX, e.clientY);
//   });
// });
</script>
<template>
  <div class="editor-layout">
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>
        <a-resize-box
          ref="toolbar"
          class="editor-layout-toolbar"
          :style="{ '--resizeBoxMaxHeight': `${props.toolbarMaxHeight}px` }"
          :directions="['top']"
          @moving="getResizeBoxHeight"
        >
        </a-resize-box>
        <div
          class="editor-layout-content"
          :style="{ '--contentHeight': `${contentHeight}px` }"
        >
          <slot name="content" />
        </div>
      </a-layout-content>
    </a-layout>
  </div>
  <div id="contextMenu" class="contextMenu">
    <a href="#" class="contextMenuItem" onclick="handleMenuItemClick('选项1')"
      >选项1</a
    >
    <a href="#" class="contextMenuItem" onclick="handleMenuItemClick('选项2')"
      >选项2</a
    >
    <a href="#" class="contextMenuItem" onclick="handleMenuItemClick('选项3')"
      >选项3</a
    >
  </div>
</template>

<style scoped lang="less">
#contextMenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  user-select: none;
}
.contextMenuItem {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: black;
  user-select: none;
  cursor: pointer;
}
.contextMenuItem:hover {
  background-color: #f1f1f1;
  user-select: none;
}

.editor-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  &-toolbar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 120px;
    min-height: 40px;
    max-height: var(--resizeBoxMaxHeight);
    background-color: purple;
    z-index: 1;
  }
  &-content {
    width: 1440px;
    max-width: 100vw;
    height: var(--contentHeight);
    overflow-y: auto;
  }
  // 头部
  :deep(.arco-layout-header) {
    display: flex;
    flex-direction: column;
    height: 64px;
    width: 100%;
    background-color: red;
  }
  // 内容区域
  :deep(.arco-layout-content) {
    position: relative;
    overflow: hidden;
    background-color: orange;
  }
}
</style>
